<script setup>
import {reactive} from "vue";
//reactive:是有局限性的 只能定义对象、Map、数组、set
const state = reactive({count:0})
const user = reactive({userName:'',password:''})

function add(){
  state.count++
}

function login(){
  console.log(user.userName)
  console.log(user.password)
}

</script>

<template>
  <p>最简单的VUE结构</p>
  <span style="background-color: red">
    我们以前使用jQuery操作页面数据 需要获取HTML元素 再去将内容改变:这是操作DOM<br/>
    在VUE中 我们直接操作数据即可将页面结构改变--->VUE帮助我们操作DOM
  </span><br/>

  count:{{state.count}}
  <button @click="add">累加</button><br/>
  <!-- v-model:数据绑定 -->
  用户名:<input type="text" v-model="user.userName"><br/>
  密码:<input type="text" v-model="user.password"><br/>
  <button @click="login">登录</button><br/>
</template>
